<template>
    <div class="recommend">
        <div class="search_box">
            <div class="label">资料推荐</div>
            <el-input v-model="iptValue" placeholder="请输入"></el-input>
            <div class="button" style="margin-left: 15px">
                <el-button icon="el-icon-search" type="primary" @click="confimFn">确定</el-button>
            </div>

        </div>
        <!-- <div class="cont" v-for="(item, index) in findResult" :key="index">
                <el-card>
                  <div class="cards">
                    <div><span class="name">课程名称：</span>
                      <span>{{ item['name']}}</span>
                    </div>
                    <div><span class="name">先修课程：</span>
                      <span>{{ item['先修课程']}}</span>
                    </div>
                    <div><span class="name">介绍：</span>
                      <span>{{ item['介绍']}}</span>
                    </div>
                    <div><span class="name">学时：</span>
                      <span>{{ item['学时']}}</span>
                    </div>
                    <div><span class="name">课程基本信息：</span>
                      <span>{{ item['课程基本信息：']}}</span>
                    </div>
                    <div><span class="name">教学大纲：</span>
                      <span>{{ item['教学大纲']}}</span>
                    </div>

                  </div>
                </el-card>
              </div> -->
              <el-card>
        <div class="content" v-show="isShow">
            <div><span class="name">推荐知识点：</span>
            <template v-for="(item,index) in a">
                {{ item }}
            </template></div>
            <div>
                <span class="name">推荐习题：</span>
            <template v-for="(item,index) in b">
                <div>{{ item }}</div>
            </template>
            </div>
        </div></el-card>
        <el-card>
        <div class="main">
            <div class="left">
                <span class="name">推荐课程如下：</span>
                <template v-for="(item,index) in d">
                    <div><span class="name">课程名称：</span>
                      <span>{{ item['name']}}</span>
                    </div>
                    <div><span class="name">先修课程：</span>
                      <span>{{ item['先修课程']}}</span><div><span class="name">学时：</span>
                      <span>{{ item['学时']}}</span>
                    </div>
                    <div><span class="name">学分：</span>
                      <span>{{ item['学分：']}}</span>
                    </div>
                    </div><div><span class="name">介绍：</span>
                      <span>{{ item['介绍']}}</span>
                    </div>
                    
                    
                </template>
            </div>
            <div class="right">
                <span class="name">推荐习题如下：</span>
                <template v-for="(item,index) in c">
                    <div>{{ item.name}}</div>
                </template>
            </div>
        </div></el-card>
    </div>
</template>

<script>
import { getSearchAPI, getRecommend,getProblemRec } from '@/api/curriculum'
export default {
    data() {
        
        return {
            iptValue: '',
            SearchMessage: {},
            recommendzhishi: {},
            isShow: false,

        }
    },
    computed:{
        //推荐知识点
        a:function(){
            return this.SearchMessage['推荐知识点为：']
        },
        //推荐习题
        b:function(){
            let s = [],res=[]
            s = this.SearchMessage['推荐习题为：']
            if(!Array.isArray(s)){
                return []
            }
            for(let i=0;i<s.length;i++){
                var br=document.createElement("br")
                var m=['Topic']+i+[':']+['\n']+[s[0][i]]
                var n=['Answer:']+[s[1][i]]
                let d = [m,n]
                res.push(m,n)
            }
            console.log("b:",res);
            return res
        },
        //课程知识
        c:function(){
            return this.recommendzhishi.exercise
        },
        //课程
        d:function(){
            return this.recommendzhishi.course
        }
    },
    async mounted() {
        let userinfo = localStorage.getItem('userInfo')
        userinfo = JSON.parse(userinfo)
        console.log(userinfo);
        let res = await getRecommend(userinfo.userId)
        res = JSON.parse(JSON.stringify(res.data.data))
        this.recommendzhishi = res
        console.log(this.recommendzhishi);
    },
    methods: {
        async confimFn() {
            if (this.iptValue != '') {
                console.log(this.iptValue);
                const res = await getProblemRec({
                    name: this.iptValue
                })
                this.isShow = true
                this.SearchMessage = res.data.data
            }
        },

    },
}
</script>

<style>
.recommend {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    align-items: center;
}

.search_box {
    margin: 20px 0;
    width: 80%;
    display: flex;
    align-items: center;
}

.search_box .label {
    text-align: center;
    font-size: 20px;
    width: 20%;
}

.recommend .main {
    width: 98%;
    height: 100%;
    display: flex;
}


.main {
    display: flex;
}

.main .left{
    flex:1;
    margin: 20px;
}
.main .right{
    flex:1;
    margin: 20px;
}
/deep/ .el-form {
    display: flex;
    align-items: center;
}
.name{
    font-size: large;
    font-weight: bold;
}
.el-card{
    margin: 10px;
}
</style>